์น ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ ๋ํ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ํฅ์ ์ดํดํ๊ณ ์ธก์ ํ๋ ๋ฐ ์ค์ ์ ๋ ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ ์งํ ์์ง ์ข ํฉ ๊ฐ์ด๋์ ๋๋ค. ์ฃผ์ ์งํ, ์ธก์ ๊ธฐ๋ฒ ๋ฐ ์ต์ ํ ์ ๋ต์ ๋ํด ์์๋ณด์ธ์.
๋ธ๋ผ์ฐ์ ์ฑ๋ฅ ์งํ ์์ง: ์๋ฐ์คํฌ๋ฆฝํธ ์ํฅ ์ธก์
์ค๋๋ ๋น ๋ฅด๊ฒ ๋ณํํ๋ ๋์งํธ ํ๊ฒฝ์์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ฌ์ฉ์๋ค์ ์ํํ ๊ฒฝํ์ ๊ธฐ๋ํ๋ฉฐ, ์ฝ๊ฐ์ ์ง์ฐ๋ ๋ถ๋ง๊ณผ ์ดํ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ์ ์ดํดํ๊ณ ์ต์ ํํ๋ ๊ฒ์ ๊ธ์ ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๊ณ ๋น์ฆ๋์ค ๋ชฉํ๋ฅผ ๋ฌ์ฑํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ด ๊ธ์์๋ ์น ์ํธ์์ฉ์ ๋ง์ ๋ถ๋ถ์ ๋ด๋นํ๋ ์ธ์ด์ธ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ํฅ์ ํนํ ์ด์ ์ ๋ง์ถฐ ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ ์งํ ์์ง์ ์ค์ํ ์ธก๋ฉด์ ์์ธํ ์ดํด๋ด ๋๋ค.
์ ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ์ ์ธก์ ํด์ผ ํ๋๊ฐ?
์งํ ๋ฐ ์ธก์ ๊ธฐ๋ฒ์ ์ธ๋ถ ์ฌํญ์ ์ดํด๋ณด๊ธฐ ์ ์ ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ ์ถ์ ์ด ์ ๊ทธํ ๋ก ์ค์ํ์ง ์ดํดํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค.
- ํฅ์๋ ์ฌ์ฉ์ ๊ฒฝํ: ๋ ๋น ๋ฅธ ๋ก๋ฉ ์๊ฐ๊ณผ ๋ถ๋๋ฌ์ด ์ํธ์์ฉ์ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ผ๋ก ์ง์ ์ด์ด์ ธ ์ฌ์ฉ์ ๋ง์กฑ๋์ ์ฐธ์ฌ๋๋ฅผ ๋์ ๋๋ค.
- ์ดํ๋ฅ ๊ฐ์: ์ฌ์ฉ์๋ค์ ๋น ๋ฅด๊ฒ ๋ก๋๋๋ ์น์ฌ์ดํธ๋ฅผ ์ดํํ ๊ฐ๋ฅ์ฑ์ด ์ ์ต๋๋ค. ๋ฎ์ ์ฑ๋ฅ์ ๋์ ์ดํ๋ฅ ์ ์ฃผ์ ์์ธ์ด๋ฉฐ, ์น์ฌ์ดํธ ํธ๋ํฝ๊ณผ ์ ํ์จ์ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
- SEO ํฅ์: ๊ตฌ๊ธ๊ณผ ๊ฐ์ ๊ฒ์ ์์ง์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ์์ ๊ฒฐ์ ์์ธ์ผ๋ก ๊ณ ๋ คํฉ๋๋ค. ์น์ฌ์ดํธ ์๋๋ฅผ ์ต์ ํํ๋ฉด ๊ฒ์ ์์ง ์์๋ฅผ ๋์ผ ์ ์์ต๋๋ค.
- ์ ํ์จ ์ฆ๊ฐ: ๋ ๋น ๋ฅธ ์น์ฌ์ดํธ๋ ์ผ๋ฐ์ ์ผ๋ก ๋ ๋์ ์ ํ์จ์ ๋ณด์ ๋๋ค. ์ํํ ์ผํ ๊ฒฝํ์ด๋ ๋น ๋ฅธ ๋ฆฌ๋ ์์ฑ ๊ณผ์ ์ ๋น์ฆ๋์ค๋ฅผ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ๋ ๋์ ๋น์ฆ๋์ค ๊ฒฐ๊ณผ: ๊ถ๊ทน์ ์ผ๋ก ํฅ์๋ ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ์ ์์ต ์ฆ๋, ๊ณ ๊ฐ ์ถฉ์ฑ๋ ๋ฐ ๋ธ๋๋ ํํ ํฅ์์ ํฌํจํ ๋ ๋์ ๋น์ฆ๋์ค ๊ฒฐ๊ณผ์ ๊ธฐ์ฌํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์ ์์๊ฑฐ๋ ์ฌ์ดํธ๊ฐ ๋จ ๋ช ๋ฐ๋ฆฌ์ด๋ผ๋ ๋ ๋นจ๋ฆฌ ๋ก๋๋๋ฉด ๋งค์ถ์ด ํฌ๊ฒ ์ฆ๊ฐํ๋ ๊ฒ๊ณผ ๊ด๋ จ์ด ์์ต๋๋ค.
์ฃผ์ ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ ์งํ
๋ช ๊ฐ์ง ์ฃผ์ ์งํ๋ ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ์ ๋ค์ํ ์ธก๋ฉด์ ๋ํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ฌํ ์งํ๋ฅผ ์ดํดํ๋ ๊ฒ์ ๊ฐ์ ์์ญ์ ์๋ณํ๋ ์ฒซ ๋ฒ์งธ ๋จ๊ณ์ ๋๋ค.
์ฝ์ด ์น ๋ฐ์ดํ (Core Web Vitals)
์ฝ์ด ์น ๋ฐ์ดํ์ ๊ตฌ๊ธ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ์ธก์ ํ๊ธฐ ์ํด ์ ์ํ ์งํ ์งํฉ์ ๋๋ค. ๋ก๋ฉ, ์ํธ์์ฉ์ฑ, ์๊ฐ์ ์์ ์ฑ์ด๋ผ๋ ์ธ ๊ฐ์ง ์ฃผ์ ์ธก๋ฉด์ ์ค์ ์ ๋ก๋๋ค.
- ์ต๋ ์ฝํ ์ธ ํ ํ์ธํธ (LCP): ํ๋ฉด์ ๊ฐ์ฅ ํฐ ๊ฐ์์ ์ฝํ ์ธ ์์(์: ์ด๋ฏธ์ง ๋๋ ํ ์คํธ ๋ธ๋ก)๊ฐ ๋ ๋๋ง๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ์ข์ LCP ์ ์๋ 2.5์ด ์ดํ์ ๋๋ค.
- ์ต์ด ์ ๋ ฅ ์ง์ฐ (FID): ๋ธ๋ผ์ฐ์ ๊ฐ ์ฒซ ์ฌ์ฉ์ ์ํธ์์ฉ(์: ๋ฒํผ์ด๋ ๋งํฌ ํด๋ฆญ)์ ์๋ตํ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ์ข์ FID ์ ์๋ 100๋ฐ๋ฆฌ์ด ์ดํ์ ๋๋ค.
- ๋์ ๋ ์ด์์ ์ด๋ (CLS): ์์์น ๋ชปํ ๋ ์ด์์ ์ด๋์ ์์ ์ ๋ํํ์ฌ ํ์ด์ง์ ์๊ฐ์ ์์ ์ฑ์ ์ธก์ ํฉ๋๋ค. ์ข์ CLS ์ ์๋ 0.1 ์ดํ์ ๋๋ค.
๊ธฐํ ์ค์ํ ์งํ
- ์ต์ด ์ฝํ ์ธ ํ ํ์ธํธ (FCP): ์ฒซ ๋ฒ์งธ ์ฝํ ์ธ ์กฐ๊ฐ(์: ํ ์คํธ ๋๋ ์ด๋ฏธ์ง)์ด ํ๋ฉด์ ๋ ๋๋ง๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ์ฝ์ด ์น ๋ฐ์ดํ์ ์๋์ง๋ง ์ด๊ธฐ ๋ก๋ฉ ์ฑ๋ฅ์ ๊ท์คํ ์งํ์ ๋๋ค.
- ์ํธ์์ฉ๊น์ง์ ์๊ฐ (TTI): ํ์ด์ง๊ฐ ์์ ํ ์ํธ์์ฉ ๊ฐ๋ฅํด์ง๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ์ฆ, ์ฌ์ฉ์๊ฐ ์๋นํ ์ง์ฐ ์์ด ๋ชจ๋ ์์์ ์ํธ์์ฉํ ์ ์์์ ์๋ฏธํฉ๋๋ค.
- ์ด ์ฐจ๋จ ์๊ฐ (TBT): ๋ฉ์ธ ์ค๋ ๋๊ฐ ๊ธด ์์ (50๋ฐ๋ฆฌ์ด ์ด์ ๊ฑธ๋ฆฌ๋ ์์ )์ ์ํด ์ฐจ๋จ๋๋ ์ด ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ๋์ TBT๋ FID ๋ฐ ์ ๋ฐ์ ์ธ ๋ฐ์์ฑ์ ๋ถ์ ์ ์ธ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
- ํ์ด์ง ๋ก๋ ์๊ฐ: ๋ชจ๋ ๋ฆฌ์์ค(์ด๋ฏธ์ง, ์คํฌ๋ฆฝํธ, ์คํ์ผ์ํธ ๋ฑ)๋ฅผ ํฌํจํ์ฌ ์ ์ฒด ํ์ด์ง๊ฐ ๋ก๋๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์ด ์๊ฐ์ ๋๋ค. ์ฝ์ด ์น ๋ฐ์ดํ์ ๋ฑ์ฅ์ผ๋ก ๋ ๊ฐ์กฐ๋์ง๋ง ์ฌ์ ํ ์ ์ฉํ ์์ ์์ค์ ์งํ์ ๋๋ค.
- ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋: ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋ ๋ชจ๋ํฐ๋ง์ ๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ (SPA) ๋ฐ ๋์ฉ๋ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ํนํ ์ค์ํฉ๋๋ค. ๊ณผ๋ํ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ์ ์ฑ๋ฅ ๋ฌธ์ ๋ฐ ์ถฉ๋๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
- CPU ์ฌ์ฉ๋: ๋์ CPU ์ฌ์ฉ๋์ ๋ชจ๋ฐ์ผ ์ฅ์น์ ๋ฐฐํฐ๋ฆฌ ์๋ช ์ ์๋ชจํ๊ณ ๋ฐ์คํฌํฑ ์ปดํจํฐ์ ์ฑ๋ฅ์ ๋ถ์ ์ ์ธ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด๋ค ๋ถ๋ถ์ด ๊ฐ์ฅ ๋ง์ CPU ๋ฆฌ์์ค๋ฅผ ์๋นํ๋์ง ์ดํดํ๋ ๊ฒ์ด ์ต์ ํ์ ํ์์ ์ ๋๋ค.
- ๋คํธ์ํฌ ์ง์ฐ ์๊ฐ: ๋ฐ์ดํฐ๊ฐ ํด๋ผ์ด์ธํธ์ ์๋ฒ ์ฌ์ด๋ฅผ ์ด๋ํ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ๋๋ค. ๋์ ๋คํธ์ํฌ ์ง์ฐ ์๊ฐ์ ํนํ ์ง๋ฆฌ์ ์ผ๋ก ๋จผ ์์น์ ์๋ ์ฌ์ฉ์๋ค์ ๋ก๋ฉ ์๊ฐ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ์ ๋ฏธ์น๋ ์ํฅ
์๋ฐ์คํฌ๋ฆฝํธ๋ ๋์ ์ด๊ณ ์ํธ์์ฉ์ ์ธ ์น ๊ฒฝํ์ ๊ฐ๋ฅํ๊ฒ ํ๋ ๊ฐ๋ ฅํ ์ธ์ด์ ๋๋ค. ๊ทธ๋ฌ๋ ์๋ชป ์์ฑ๋๊ฑฐ๋ ๊ณผ๋ํ ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ฑ๋ฅ์ ๋ฏธ์น๋ ๋ฐฉ์์ ์ดํดํ๋ ๊ฒ์ด ์ต์ ํ์ ๋งค์ฐ ์ค์ํฉ๋๋ค.
- ๋ฉ์ธ ์ค๋ ๋ ์ฐจ๋จ: ์๋ฐ์คํฌ๋ฆฝํธ ์คํ์ ์ข ์ข ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ์ฌ ๋ธ๋ผ์ฐ์ ๊ฐ ํ์ด์ง๋ฅผ ๋ ๋๋งํ๊ฑฐ๋ ์ฌ์ฉ์ ์ํธ์์ฉ์ ์๋ตํ๋ ๊ฒ์ ๋ฐฉํดํฉ๋๋ค. ์ค๋ ์คํ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ ์ FID ๋ฐ TBT ์ ์๋ฅผ ์ ํ์ํฌ ์ ์์ต๋๋ค.
- ํฐ ์คํฌ๋ฆฝํธ ํ์ผ: ํฐ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ๋ค์ด๋ก๋ํ๊ณ ํ์ฑํ๋ ๋ฐ ์๋นํ ์๊ฐ์ด ๊ฑธ๋ฆด ์ ์์ผ๋ฉฐ, ์ด๋ ํ์ด์ง ๋ ๋๋ง์ ์ง์ฐ์ํค๊ณ ํ์ด์ง ๋ก๋ ์๊ฐ์ ์ฆ๊ฐ์ํต๋๋ค.
- ๋นํจ์จ์ ์ธ ์ฝ๋: ๋นํจ์จ์ ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ ๊ณผ๋ํ CPU ๋ฆฌ์์ค๋ฅผ ์๋นํ๊ณ ๋ธ๋ผ์ฐ์ ๋ฅผ ๋๋ฆฌ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. ์ผ๋ฐ์ ์ธ ๋ฌธ์ ๋ก๋ ๋ถํ์ํ ๊ณ์ฐ, ๋นํจ์จ์ ์ธ DOM ์กฐ์, ๋ฉ๋ชจ๋ฆฌ ๋์ ๋ฑ์ด ์์ต๋๋ค.
- ์๋ํํฐ ์คํฌ๋ฆฝํธ: ๋ถ์ ํธ๋์ปค, ๊ด๊ณ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ์์ ๋ฏธ๋์ด ์์ ฏ๊ณผ ๊ฐ์ ์๋ํํฐ ์คํฌ๋ฆฝํธ๋ ์ข ์ข ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ์ด๋ฌํ ์คํฌ๋ฆฝํธ๋ ๋๋ฆฌ๊ฒ ๋ก๋๋๊ฑฐ๋, ๊ณผ๋ํ ๋ฆฌ์์ค๋ฅผ ์๋นํ๊ฑฐ๋, ๋ณด์ ์ทจ์ฝ์ ์ ์ ๋ฐํ ์ ์์ต๋๋ค.
- ๋ ๋๋ง ์ฐจ๋จ ๋ฆฌ์์ค: ์๋ฐ์คํฌ๋ฆฝํธ(๋ฐ CSS)๋ ์ด๊ธฐ ๋ ๋๋ง์ ์ฐจ๋จํ ์ ์์ต๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ํ์ด์ง ๋ ๋๋ง์ ๊ณ์ํ๊ธฐ ์ ์ ์ด๋ฅผ ๋ค์ด๋ก๋, ํ์ฑ ๋ฐ ์คํํด์ผ ํฉ๋๋ค.
๋ธ๋ผ์ฐ์ ์ฑ๋ฅ ์งํ ์์ง ๊ธฐ๋ฒ
๋ธ๋ผ์ฐ์ ์ฑ๋ฅ ์งํ๋ฅผ ์์งํ๋ ๋ฐ๋ ์ฌ๋ฌ ๊ฐ์ง ๊ธฐ๋ฒ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๊ธฐ๋ฒ์ ์ ํ์ ์ถ์ ํ๋ ค๋ ํน์ ์งํ์ ํ์ํ ์์ธ ์์ค์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค.
Chrome ๊ฐ๋ฐ์ ๋๊ตฌ (Chrome DevTools)
Chrome ๊ฐ๋ฐ์ ๋๊ตฌ๋ ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ์ ๋ํ ์์ธํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํ๋ ๊ฐ๋ ฅํ ๋ด์ฅ ๊ฐ๋ฐ์ ๋๊ตฌ ์ธํธ์ ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ์คํ์ ํ๋กํ์ผ๋งํ๊ณ , ๋คํธ์ํฌ ์์ฒญ์ ๋ถ์ํ๋ฉฐ, ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ ์ ์์ต๋๋ค.
Chrome ๊ฐ๋ฐ์ ๋๊ตฌ ์ฌ์ฉ ๋ฐฉ๋ฒ:
- F12 ํค(๋๋ Windows/Linux์์๋ Ctrl+Shift+I, macOS์์๋ Cmd+Option+I)๋ฅผ ๋๋ฌ Chrome ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฝ๋๋ค.
- "Performance" ํญ์ผ๋ก ์ด๋ํฉ๋๋ค.
- "Record" ๋ฒํผ์ ํด๋ฆญํ์ฌ ์ฑ๋ฅ ๋ฐ์ดํฐ ๊ธฐ๋ก์ ์์ํฉ๋๋ค.
- ์น์ฌ์ดํธ์ ์ํธ์์ฉํ์ฌ ์ฌ์ฉ์ ํ๋์ ์๋ฎฌ๋ ์ด์ ํฉ๋๋ค.
- "Stop" ๋ฒํผ์ ํด๋ฆญํ์ฌ ๊ธฐ๋ก์ ์ค์งํฉ๋๋ค.
- ์ฑ๋ฅ ํ์๋ผ์ธ์ ๋ถ์ํ์ฌ ๊ฐ์ ์์ญ์ ์๋ณํฉ๋๋ค. ํ์๋ผ์ธ์ CPU ์ฌ์ฉ๋, ๋คํธ์ํฌ ํ๋, ๋ ๋๋ง ์๊ฐ ๋ฐ ๊ธฐํ ์ค์ํ ์งํ๋ฅผ ๋ณด์ฌ์ค๋๋ค.
์์: ๊ธด ์์ ์๋ณํ๊ธฐ
Chrome ๊ฐ๋ฐ์ ๋๊ตฌ์ Performance ํจ๋์ ๊ธด ์์ (50๋ฐ๋ฆฌ์ด ์ด์ ๊ฑธ๋ฆฌ๋ ์์ )์ ๋นจ๊ฐ์์ผ๋ก ๊ฐ์กฐ ํ์ํฉ๋๋ค. ์ด๋ฌํ ์์ ์ ๊ฒํ ํ์ฌ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์๋ณํ๊ณ ๋ ๋์ ์ฑ๋ฅ์ ์ํด ์ต์ ํํ ์ ์์ต๋๋ค.
Performance API
Performance API๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋์์ ์ง์ ์์ธํ ์ฑ๋ฅ ์งํ๋ฅผ ์์งํ ์ ์๊ฒ ํด์ฃผ๋ ํ์ค ์น API์ ๋๋ค. ๋ก๋ ์๊ฐ, ๋ ๋๋ง ์๊ฐ, ๋ฆฌ์์ค ํ์ด๋ฐ ๋ฑ ๋ค์ํ ์ฑ๋ฅ ํ์ด๋ฐ์ ๋ํ ์ ๊ทผ์ ์ ๊ณตํฉ๋๋ค.
์์: Performance API๋ฅผ ์ฌ์ฉํ์ฌ LCP ์ธก์ ํ๊ธฐ
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
const lastEntry = entries[entries.length - 1];
console.log('LCP:', lastEntry.startTime);
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });
์ด ์ฝ๋ ์ค๋ํซ์ PerformanceObserver๋ฅผ ์ฌ์ฉํ์ฌ LCP ํญ๋ชฉ์ ๋ชจ๋ํฐ๋งํ๊ณ LCP ๊ฐ์ ์ฝ์์ ๊ธฐ๋กํฉ๋๋ค. ์ด ์ฝ๋๋ฅผ ์์ ํ์ฌ ๋ค๋ฅธ ์ฑ๋ฅ ์งํ๋ฅผ ์์งํ๊ณ ๋ถ์ ์๋ฒ๋ก ๋ณด๋ผ ์ ์์ต๋๋ค.
Lighthouse
Lighthouse๋ ์น ํ์ด์ง์ ํ์ง์ ํฅ์์ํค๊ธฐ ์ํ ์คํ์์ค ์๋ํ ๋๊ตฌ์ ๋๋ค. Chrome ๊ฐ๋ฐ์ ๋๊ตฌ, ๋ช ๋ น์ค ๋๋ Node ๋ชจ๋๋ก ์คํํ ์ ์์ต๋๋ค. Lighthouse๋ ์ฑ๋ฅ, ์ ๊ทผ์ฑ, ๋ชจ๋ฒ ์ฌ๋ก, SEO ๋ฐ ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ์ ๋ํ ๊ฐ์ฌ๋ฅผ ์ ๊ณตํฉ๋๋ค.
Lighthouse ์ฌ์ฉ ๋ฐฉ๋ฒ:
- Chrome ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฝ๋๋ค.
- "Lighthouse" ํญ์ผ๋ก ์ด๋ํฉ๋๋ค.
- ๊ฐ์ฌํ ์นดํ ๊ณ ๋ฆฌ(์: Performance)๋ฅผ ์ ํํฉ๋๋ค.
- "Generate report" ๋ฒํผ์ ํด๋ฆญํฉ๋๋ค.
- Lighthouse ๋ณด๊ณ ์๋ฅผ ๋ถ์ํ์ฌ ๊ฐ์ ์์ญ์ ์๋ณํฉ๋๋ค. ๋ณด๊ณ ์๋ ์น์ฌ์ดํธ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํ ๊ตฌ์ฒด์ ์ธ ๊ถ์ฅ ์ฌํญ์ ์ ๊ณตํฉ๋๋ค.
์์: Lighthouse ๊ถ์ฅ ์ฌํญ
Lighthouse๋ ์ด๋ฏธ์ง ์ต์ ํ, ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐ CSS ํ์ผ ์ถ์, ๋ธ๋ผ์ฐ์ ์บ์ฑ ํ์ฉ ๋๋ ๋ ๋๋ง ์ฐจ๋จ ๋ฆฌ์์ค ์ ๊ฑฐ ๋ฑ์ ๊ถ์ฅํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๊ถ์ฅ ์ฌํญ์ ๊ตฌํํ๋ฉด ์น์ฌ์ดํธ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์ค์ ์ฌ์ฉ์ ๋ชจ๋ํฐ๋ง (RUM)
์ค์ ์ฌ์ฉ์ ๋ชจ๋ํฐ๋ง(RUM)์ ์น์ฌ์ดํธ๋ฅผ ๋ฐฉ๋ฌธํ๋ ์ค์ ์ฌ์ฉ์๋ก๋ถํฐ ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ์์งํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ด๋ ๋คํธ์ํฌ ์ง์ฐ ์๊ฐ, ์ฅ์น ๊ธฐ๋ฅ ๋ฐ ๋ธ๋ผ์ฐ์ ๋ฒ์ ๊ณผ ๊ฐ์ ์์๋ฅผ ๊ณ ๋ คํ์ฌ ์ค์ ํ๊ฒฝ์์ ์น์ฌ์ดํธ๊ฐ ์ด๋ป๊ฒ ์๋ํ๋์ง์ ๋ํ ๊ท์คํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํฉ๋๋ค. RUM ๋ฐ์ดํฐ๋ ์๋ํํฐ ์๋น์ค๋ ์์ฒด ๊ตฌ์ถ ์๋ฃจ์ ์ ์ฌ์ฉํ์ฌ ์์งํ ์ ์์ต๋๋ค.
RUM์ ์ด์ :
- ์ฌ์ฉ์ ๊ฒฝํ์ ๋ํ ํ์ค์ ์ธ ์๊ฐ์ ์ ๊ณตํฉ๋๋ค.
- ์คํ์ค ํ ์คํธ์์๋ ๋ํ๋์ง ์์ ์ ์๋ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์๋ณํฉ๋๋ค.
- ์๊ฐ์ ๋ฐ๋ฅธ ์ฑ๋ฅ ์ถ์ธ๋ฅผ ์ถ์ ํ ์ ์์ต๋๋ค.
- ์ค์ ์ฌ์ฉ์ ์ํฅ์ ๊ธฐ๋ฐํ์ฌ ์ต์ ํ ๋ ธ๋ ฅ์ ์ฐ์ ์์๋ฅผ ์ ํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
์ธ๊ธฐ ์๋ RUM ๋๊ตฌ:
- Google Analytics
- New Relic
- Datadog
- Sentry
- Raygun
์์: RUM์ Google Analytics ์ฌ์ฉํ๊ธฐ
Google Analytics๋ ํ์ด์ง ๋ก๋ ์๊ฐ ๋ฐ ์๋ฒ ์๋ต ์๊ฐ๊ณผ ๊ฐ์ ๊ธฐ๋ณธ ์ฑ๋ฅ ์งํ๋ฅผ ์ ๊ณตํฉ๋๋ค. ๋ํ ์ฌ์ฉ์ ์ง์ ์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ๋ด์ ํน์ ์ฑ๋ฅ ์งํ๋ฅผ ์ถ์ ํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ํน์ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ด๋ ์ฌ์ฉ์ ์์ ์ด ์๋ฃ๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ถ์ ํ ์ ์์ต๋๋ค.
WebPageTest
WebPageTest๋ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ํ ์คํธํ๊ธฐ ์ํ ๋ฌด๋ฃ ์คํ์์ค ๋๊ตฌ์ ๋๋ค. ์ ์ธ๊ณ ์ฌ๋ฌ ์์น์์ ํ ์คํธ๋ฅผ ์คํํ๊ณ ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด์ ์๋ฎฌ๋ ์ด์ ํ ์ ์์ต๋๋ค. WebPageTest๋ ์ํฐํด ์ฐจํธ, ํ๋ฆ์คํธ๋ฆฝ ๋ฐ ์ฑ๋ฅ ์งํ๋ฅผ ํฌํจํ ์์ธํ ์ฑ๋ฅ ๋ณด๊ณ ์๋ฅผ ์ ๊ณตํฉ๋๋ค.
WebPageTest ์ฌ์ฉ ๋ฐฉ๋ฒ:
- WebPageTest ์น์ฌ์ดํธ(www.webpagetest.org)๋ฅผ ๋ฐฉ๋ฌธํฉ๋๋ค.
- ํ ์คํธํ ์น์ฌ์ดํธ์ URL์ ์ ๋ ฅํฉ๋๋ค.
- ํ ์คํธ ์์น์ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ ํํฉ๋๋ค.
- ๋คํธ์ํฌ ์ค๋กํ๋ง ๋๋ ์ฐ๊ฒฐ ์ ํ๊ณผ ๊ฐ์ ๊ณ ๊ธ ์ค์ ์ ๊ตฌ์ฑํฉ๋๋ค.
- "Start Test" ๋ฒํผ์ ํด๋ฆญํฉ๋๋ค.
- WebPageTest ๋ณด๊ณ ์๋ฅผ ๋ถ์ํ์ฌ ๊ฐ์ ์์ญ์ ์๋ณํฉ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ ์ต์ ํ ์ ๋ต
์ฑ๋ฅ ์งํ๋ฅผ ์์งํ๊ณ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ ํ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ์ ์ต์ ํํ๊ธฐ ์ํด ๋ค์ํ ์ ๋ต์ ๊ตฌํํ ์ ์์ต๋๋ค.
- ์ฝ๋ ๋ถํ (Code Splitting): ํฐ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ํ์ํ ๋ ๋ก๋ํ ์ ์๋ ๋ ์์ ์ฒญํฌ๋ก ๋๋๋๋ค. ์ด๋ ์ด๊ธฐ ๋ค์ด๋ก๋ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ณ ํ์ด์ง ๋ก๋ ์๊ฐ์ ํฅ์์ํต๋๋ค. Webpack, Parcel, Rollup๊ณผ ๊ฐ์ ๋๊ตฌ๋ ์ฝ๋ ๋ถํ ์ ์ง์ํฉ๋๋ค.
- ํธ๋ฆฌ ์์ดํน (Tree Shaking): ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค์์ ์ฌ์ฉ๋์ง ์๋ ์ฝ๋๋ฅผ ์ ๊ฑฐํฉ๋๋ค. ์ด๋ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ค์ด๊ณ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค. Webpack, Rollup๊ณผ ๊ฐ์ ๋๊ตฌ๋ ์๋์ผ๋ก ํธ๋ฆฌ ์์ดํน์ ์ํํ ์ ์์ต๋๋ค.
- ์ถ์ ๋ฐ ์์ถ (Minification and Compression): ๋ถํ์ํ ๊ณต๋ฐฑ๊ณผ ์ฃผ์์ ์ ๊ฑฐํ๊ธฐ ์ํด ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์ถ์ํฉ๋๋ค. ๋ค์ด๋ก๋ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ธฐ ์ํด gzip ๋๋ Brotli๋ฅผ ์ฌ์ฉํ์ฌ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์์ถํฉ๋๋ค.
- ์ง์ฐ ๋ก๋ฉ (Lazy Loading): ์ค์ํ์ง ์์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋์ ๋ก๋ฉ์ ํ์ํ ๋๊น์ง ์ง์ฐ์ํต๋๋ค. ์ด๋ ์ด๊ธฐ ํ์ด์ง ๋ก๋ ์๊ฐ์ ํฅ์์ํค๊ณ ๋ฉ์ธ ์ค๋ ๋์ ๋ํ ์ํฅ์ ์ค์ผ ์ ์์ต๋๋ค.
- ๋๋ฐ์ด์ฑ ๋ฐ ์ค๋กํ๋ง (Debouncing and Throttling): ๊ณผ๋ํ ๊ณ์ฐ์ ๋ฐฉ์งํ๊ณ ๋ฐ์์ฑ์ ํฅ์์ํค๊ธฐ ์ํด ํจ์ ํธ์ถ ๋น๋๋ฅผ ์ ํํฉ๋๋ค. ๋๋ฐ์ด์ฑ๊ณผ ์ค๋กํ๋ง์ ์คํฌ๋กค ํธ๋ค๋ฌ ๋ฐ ๋ฆฌ์ฌ์ด์ฆ ํธ๋ค๋ฌ์ ๊ฐ์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์ต์ ํํ๋ ๋ฐ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋ฉ๋๋ค.
- ํจ์จ์ ์ธ DOM ์กฐ์: DOM ์กฐ์ ํ์๋ฅผ ์ต์ํํ๊ณ ํจ์จ์ ์ธ DOM ์กฐ์ ๊ธฐ๋ฒ์ ์ฌ์ฉํฉ๋๋ค. ๋ฃจํ์์ DOM์ ์ง์ ์กฐ์ํ๋ ๊ฒ์ ํผํ๊ณ document fragment์ ๊ฐ์ ๊ธฐ๋ฒ์ ์ฌ์ฉํ์ฌ ์ ๋ฐ์ดํธ๋ฅผ ์ผ๊ด ์ฒ๋ฆฌํฉ๋๋ค.
- ์น ์์ปค (Web Workers): ๊ณ์ฐ ์ง์ฝ์ ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ์์ ์ ์น ์์ปค๋ก ์ด๋ํ์ฌ ๋ฉ์ธ ์ค๋ ๋ ์ฐจ๋จ์ ๋ฐฉ์งํฉ๋๋ค. ์น ์์ปค๋ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์คํ๋๋ฉฐ ์ฌ์ฉ์ ์ธํฐํ์ด์ค์ ์ํฅ์ ์ฃผ์ง ์๊ณ ๊ณ์ฐ์ ์ํํ ์ ์์ต๋๋ค.
- ์บ์ฑ (Caching): ๋ธ๋ผ์ฐ์ ์บ์ฑ์ ํ์ฉํ์ฌ ์์ฃผ ์ก์ธ์คํ๋ ๋ฆฌ์์ค๋ฅผ ๋ก์ปฌ์ ์ ์ฅํฉ๋๋ค. ์ด๋ ๋คํธ์ํฌ ์์ฒญ ์๋ฅผ ์ค์ด๊ณ ์ฌ๋ฐฉ๋ฌธ์์ ํ์ด์ง ๋ก๋ ์๊ฐ์ ํฅ์์ํต๋๋ค.
- ์๋ํํฐ ์คํฌ๋ฆฝํธ ์ต์ ํ: ์๋ํํฐ ์คํฌ๋ฆฝํธ์ ์ฑ๋ฅ ์ํฅ์ ์ ์คํ๊ฒ ํ๊ฐํ๊ณ ๋ถํ์ํ ์คํฌ๋ฆฝํธ๋ฅผ ์ ๊ฑฐํฉ๋๋ค. ํ์ด์ง ๋ก๋ ์๊ฐ์ ๋ฏธ์น๋ ์ํฅ์ ์ต์ํํ๊ธฐ ์ํด ์๋ํํฐ ์คํฌ๋ฆฝํธ์ ๋น๋๊ธฐ ๋ก๋ฉ ๋๋ ์ง์ฐ ๋ก๋ฉ์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
- ์ฌ๋ฐ๋ฅธ ํ๋ ์์ํฌ/๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ํ: ๊ฐ ํ๋ ์์ํฌ/๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ฑ๋ฅ ํ๋กํ์ด ๋ค๋ฆ ๋๋ค. ์ฌ์ฉํ๊ธฐ๋ก ๊ฒฐ์ ํ๊ธฐ ์ ์ ์ฑ๋ฅ ํน์ฑ์ ์ ์คํ๊ฒ ์กฐ์ฌํ์ญ์์ค. ์ผ๋ถ ํ๋ ์์ํฌ๋ ๋ค๋ฅธ ๊ฒ๋ณด๋ค ์ค๋ฒํค๋๊ฐ ๋์ ๊ฒ์ผ๋ก ์๋ ค์ ธ ์์ต๋๋ค.
- ๊ฐ์ํ/์๋์ (Virtualization/Windowing): ํฐ ๋ฐ์ดํฐ ๋ชฉ๋ก์ ๋ค๋ฃฐ ๋ ๊ฐ์ํ(์๋์์ด๋ผ๊ณ ๋ ํจ)๋ฅผ ์ฌ์ฉํ์ญ์์ค. ์ด ๊ธฐ๋ฒ์ ๋ชฉ๋ก์ ๋ณด์ด๋ ๋ถ๋ถ๋ง ๋ ๋๋งํ์ฌ ์ฑ๋ฅ๊ณผ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋์ ํฌ๊ฒ ํฅ์์ํต๋๋ค.
์ง์์ ์ธ ๋ชจ๋ํฐ๋ง ๋ฐ ๊ฐ์
๋ธ๋ผ์ฐ์ ์ฑ๋ฅ ์ต์ ํ๋ ์ผํ์ฑ ์์ ์ด ์๋๋๋ค. ์ง์์ ์ธ ๋ชจ๋ํฐ๋ง๊ณผ ๊ฐ์ ์ด ํ์ํฉ๋๋ค. ์ ๊ธฐ์ ์ผ๋ก ์ฑ๋ฅ ์งํ๋ฅผ ์์งํ๊ณ ๋ฐ์ดํฐ๋ฅผ ๋ถ์ํ๋ฉฐ ์ต์ ํ ์ ๋ต์ ๊ตฌํํ์ญ์์ค. ์น์ฌ์ดํธ๊ฐ ๋ฐ์ ํ๊ณ ์๋ก์ด ๊ธฐ์ ์ด ๋ฑ์ฅํจ์ ๋ฐ๋ผ ์น์ฌ์ดํธ๊ฐ ๋น ๋ฅด๊ณ ๋ฐ์์ฑ์ ์ ์งํ๋๋ก ์ฑ๋ฅ ์ต์ ํ ๋ ธ๋ ฅ์ ์กฐ์ ํด์ผ ํฉ๋๋ค.
์ฃผ์ ๋ด์ฉ:
- ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ์ ์ฌ์ฉ์ ๊ฒฝํ, SEO ๋ฐ ๋น์ฆ๋์ค ๊ฒฐ๊ณผ์ ๋งค์ฐ ์ค์ํฉ๋๋ค.
- ์ฃผ์ ์ฑ๋ฅ ์งํ๋ฅผ ์ดํดํ๋ ๊ฒ์ ๊ฐ์ ์์ญ์ ์๋ณํ๋ ๋ฐ ํ์์ ์ ๋๋ค.
- ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
- Chrome ๊ฐ๋ฐ์ ๋๊ตฌ, Performance API, Lighthouse, RUM, WebPageTest๋ฅผ ํฌํจํ ์ฌ๋ฌ ๊ธฐ๋ฒ์ ์ฌ์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ ์งํ๋ฅผ ์์งํ ์ ์์ต๋๋ค.
- ์ฝ๋ ๋ถํ , ํธ๋ฆฌ ์์ดํน, ์ถ์, ์ง์ฐ ๋ก๋ฉ, ํจ์จ์ ์ธ DOM ์กฐ์ ๋ฑ ๋ค์ํ ์ ๋ต์ ๊ตฌํํ์ฌ ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ์ ์ต์ ํํ ์ ์์ต๋๋ค.
- ์ต์ ์ ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ์ ์ ์งํ๋ ค๋ฉด ์ง์์ ์ธ ๋ชจ๋ํฐ๋ง๊ณผ ๊ฐ์ ์ด ํ์์ ์ ๋๋ค.
๊ธ๋ก๋ฒ ๊ณ ๋ ค ์ฌํญ
๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ๋์์ผ๋ก ์ต์ ํํ ๋๋ ๋ค์ ์ถ๊ฐ ์์๋ฅผ ๊ณ ๋ คํ์ญ์์ค.
- ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ (CDN): CDN์ ์ฌ์ฉํ์ฌ ์น์ฌ์ดํธ ์ฝํ ์ธ ๋ฅผ ์ ์ธ๊ณ ์๋ฒ์ ๋ฐฐํฌํฉ๋๋ค. ์ด๋ ๋คํธ์ํฌ ์ง์ฐ ์๊ฐ์ ์ค์ด๊ณ ์ง๋ฆฌ์ ์ผ๋ก ๋จผ ์์น์ ์๋ ์ฌ์ฉ์์ ๋ก๋ฉ ์๊ฐ์ ํฅ์์ํต๋๋ค. ์ฌ์ฉ์ ๊ธฐ๋ฐ๊ณผ ๊ด๋ จ๋ ์ฃผ์ ์์ฅ์ POP(Points of Presence)๊ฐ ์๋ CDN์ ๊ณ ๋ คํ์ญ์์ค.
- ๊ตญ์ ํ (i18n) ๋ฐ ํ์งํ (l10n): ์น์ฌ์ดํธ๊ฐ ๋ค๋ฅธ ์ธ์ด์ ์ง์ญ์ ์ง์ํ๋๋ก ์ ์ ํ๊ฒ ๊ตญ์ ํ ๋ฐ ํ์งํ๋์๋์ง ํ์ธํฉ๋๋ค. ์ฌ๊ธฐ์๋ ์ฝํ ์ธ ๋ฒ์ญ, ๋ ์ง ๋ฐ ์ซ์ ํ์์ ์ ์ ํ ์ง์ , ๋ค๋ฅธ ํ ์คํธ ๋ฐฉํฅ์ ์์ฉํ๊ธฐ ์ํ ๋ ์ด์์ ์กฐ์ ์ด ํฌํจ๋ฉ๋๋ค.
- ๋ชจ๋ฐ์ผ ์ต์ ํ: ์ ์ธ๊ณ ์ธํฐ๋ท ํธ๋ํฝ์ ์๋น ๋ถ๋ถ์ด ๋ชจ๋ฐ์ผ ์ฅ์น์์ ๋ฐ์ํ๋ฏ๋ก ๋ชจ๋ฐ์ผ ์ฅ์น์ ๋ง๊ฒ ์น์ฌ์ดํธ๋ฅผ ์ต์ ํํฉ๋๋ค. ์ฌ๊ธฐ์๋ ๋ฐ์ํ ๋์์ธ ์ฌ์ฉ, ์ด๋ฏธ์ง ์ต์ ํ, ์๋ฐ์คํฌ๋ฆฝํธ ์ฌ์ฉ ์ต์ํ๊ฐ ํฌํจ๋ฉ๋๋ค.
- ์ ๊ทผ์ฑ: ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๊ฐ ์น์ฌ์ดํธ์ ์ ๊ทผํ ์ ์๋๋ก ๋ณด์ฅํฉ๋๋ค. ์ฌ๊ธฐ์๋ ์ด๋ฏธ์ง์ ๋ํ ๋์ฒด ํ ์คํธ ์ ๊ณต, ์๋งจํฑ HTML ์ฌ์ฉ, WCAG์ ๊ฐ์ ์ ๊ทผ์ฑ ๊ฐ์ด๋๋ผ์ธ ์ค์๊ฐ ํฌํจ๋ฉ๋๋ค.
- ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด: ์ ์ธ๊ณ ์ฌ๋ฌ ์ง์ญ์ ์ฌ์ฉ์๋ ๋คํธ์ํฌ ์กฐ๊ฑด์ด ๋ค๋ฅผ ์ ์์์ ์ธ์งํด์ผ ํฉ๋๋ค. ๋๋ฆฌ๊ฑฐ๋ ์ ๋ขฐํ ์ ์๋ ์ฐ๊ฒฐ์ ํ๋ ฅ์ ์ผ๋ก ๋์ํ ์ ์๋๋ก ์น์ฌ์ดํธ๋ฅผ ์ค๊ณํ์ญ์์ค. ๋คํธ์ํฌ ์ฐ๊ฒฐ ์ํ๊ฐ ์ข์ง ์์ ์ฌ์ฉ์์ ๊ฒฝํ์ ๊ฐ์ ํ๊ธฐ ์ํด ์คํ๋ผ์ธ ์บ์ฑ ๋ฐ ์ ์ง์ ๋ก๋ฉ๊ณผ ๊ฐ์ ๊ธฐ๋ฒ์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
๊ฒฐ๋ก
ํนํ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ํฅ์ ํฌํจํ์ฌ ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ์ ์ธก์ ํ๊ณ ์ต์ ํํ๋ ๊ฒ์ ํ๋ ์น ๊ฐ๋ฐ์ ์ค์ํ ์ธก๋ฉด์ ๋๋ค. ์ฃผ์ ์งํ๋ฅผ ์ดํดํ๊ณ , ์ฌ์ฉ ๊ฐ๋ฅํ ๋๊ตฌ๋ฅผ ํ์ฉํ๋ฉฐ, ํจ๊ณผ์ ์ธ ์ต์ ํ ์ ๋ต์ ๊ตฌํํจ์ผ๋ก์จ ๋น์ฆ๋์ค ์ฑ๊ณต์ ์ด๋๋ ๋น ๋ฅด๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋๋ฉฐ ๋งค๋ ฅ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค. ์น์ฌ์ดํธ๊ฐ ๋ฐ์ ํ๊ณ ์น ํ๊ฒฝ์ด ๋ณํํจ์ ๋ฐ๋ผ ์ฑ๋ฅ์ ์ง์์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ๊ณ ์ต์ ํ ๋ ธ๋ ฅ์ ์กฐ์ ํ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค. ์ด๋ฌํ ์ฑ๋ฅ์ ๋ํ ์ฝ์์ ๊ถ๊ทน์ ์ผ๋ก ์ฌ์ฉ์์ ์์น๋ ์ฅ์น์ ๊ด๊ณ์์ด ๋ ๊ธ์ ์ ์ธ ๊ฒฝํ์ผ๋ก ์ด์ด์ง ๊ฒ์ ๋๋ค.